﻿ <style type="text/css">
 #product_content{}
 .product_list{width:100%; height:100px; position:relative; word-wrap: break-word; margin:0 0 20px 0px;}
	.column_left{float:left; width:130px;}
		.product_image{float:left; width:130px; height:100px; overflow: hidden}
	.column_right{float:left; width:560px;}
		.product_title{float:left;}
		.product_detail{float:left;}
		.roduct_cart{float:left;}
		.product_price{float:left;}
.product-reccommend{ width:16px; height:15px; cursor:pointer;}

 </style>
<!-- the scrollbar -->
<link rel="stylesheet" type="text/css" href="modules/IShopStore/pnjavascript/ScrollbarVisibility/css/style.css" />
<link rel="stylesheet" type="text/css" href="modules/IShopStore/pnjavascript/ScrollbarVisibility/css/jquery.jscrollpane.codrops2.css" />
<!-- the mousewheel plugin -->
<script type="text/javascript" src="modules/IShopStore/pnjavascript/ScrollbarVisibility/js/jquery.mousewheel.js"></script>
<!-- the jScrollPane script -->
<script type="text/javascript" src="modules/IShopStore/pnjavascript/ScrollbarVisibility/js/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="modules/IShopStore/pnjavascript/ScrollbarVisibility/js/scroll-startstop.events.jquery.js"></script>


<!-- the Cloud Zoom script -->
<link href="modules/IShopStore/pnjavascript/cloud-zoom/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css">
<link href="modules/IShopStore/pnjavascript/cloud-zoom/main.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="modules/IShopStore/pnjavascript/cloud-zoom/slimbox2.css" type="text/css" media="screen">
<link href="modules/IShopStore/pnjavascript/cloud-zoom/cloud-zoom.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="modules/IShopStore/pnjavascript/cloud-zoom/jquery.min.js"></script>
<script type="text/javascript" src="modules/IShopStore/pnjavascript/cloud-zoom/jquery-ui.min.js"></script>
<script type="text/javascript" src="modules/IShopStore/pnjavascript/cloud-zoom/showhide.js"></script>
<script type="text/JavaScript" src="modules/IShopStore/pnjavascript/cloud-zoom/slimbox2.js"></script>
<script type="text/javascript" src="modules/IShopStore/pnjavascript/cloud-zoom/cloud-zoom.1.0.2.js"></script>

	
<script type="text/javascript">
		$(function() {
		
			// the element we want to apply the jScrollPane
			var $el					= $('#jp-container').jScrollPane({
				verticalGutter 	: -16
			}),
					
			// the extension functions and options 	
				extensionPlugin 	= {
					
					extPluginOpts	: {
						// speed for the fadeOut animation
						mouseLeaveFadeSpeed	: 500,
						// scrollbar fades out after hovertimeout_t milliseconds
						hovertimeout_t		: 1000,
						// if set to false, the scrollbar will be shown on mouseenter and hidden on mouseleave
						// if set to true, the same will happen, but the scrollbar will be also hidden on mouseenter after "hovertimeout_t" ms
						// also, it will be shown when we start to scroll and hidden when stopping
						useTimeout			: false,
						// the extension only applies for devices with width > deviceWidth
						deviceWidth			: 980
					},
					hovertimeout	: null, // timeout to hide the scrollbar
					isScrollbarHover: false,// true if the mouse is over the scrollbar
					elementtimeout	: null,	// avoids showing the scrollbar when moving from inside the element to outside, passing over the scrollbar
					isScrolling		: false,// true if scrolling
					addHoverFunc	: function() {
						
						// run only if the window has a width bigger than deviceWidth
						if( $(window).width() <= this.extPluginOpts.deviceWidth ) return false;
						
						var instance		= this;
						
						// functions to show / hide the scrollbar
						$.fn.jspmouseenter 	= $.fn.show;
						$.fn.jspmouseleave 	= $.fn.fadeOut;
						
						// hide the jScrollPane vertical bar
						var $vBar			= this.getContentPane().siblings('.jspVerticalBar').hide();
						
						/*
						 * mouseenter / mouseleave events on the main element
						 * also scrollstart / scrollstop - @James Padolsey : http://james.padolsey.com/javascript/special-scroll-events-for-jquery/
						 */
						$el.bind('mouseenter.jsp',function() {
							
							// show the scrollbar
							$vBar.stop( true, true ).jspmouseenter();
							
							if( !instance.extPluginOpts.useTimeout ) return false;
							
							// hide the scrollbar after hovertimeout_t ms
							clearTimeout( instance.hovertimeout );
							instance.hovertimeout 	= setTimeout(function() {
								// if scrolling at the moment don't hide it
								if( !instance.isScrolling )
									$vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
							}, instance.extPluginOpts.hovertimeout_t );
							
							
						}).bind('mouseleave.jsp',function() {
							
							// hide the scrollbar
							if( !instance.extPluginOpts.useTimeout )
								$vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
							else {
							clearTimeout( instance.elementtimeout );
							if( !instance.isScrolling )
									$vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
							}
							
						});
						
						if( this.extPluginOpts.useTimeout ) {
							
							$el.bind('scrollstart.jsp', function() {
							
								// when scrolling show the scrollbar
								clearTimeout( instance.hovertimeout );
								instance.isScrolling	= true;
								$vBar.stop( true, true ).jspmouseenter();
								
							}).bind('scrollstop.jsp', function() {
								
								// when stop scrolling hide the scrollbar (if not hovering it at the moment)
								clearTimeout( instance.hovertimeout );
								instance.isScrolling	= false;
								instance.hovertimeout 	= setTimeout(function() {
									if( !instance.isScrollbarHover )
										$vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
								}, instance.extPluginOpts.hovertimeout_t );
								
							});
							
							// wrap the scrollbar
							// we need this to be able to add the mouseenter / mouseleave events to the scrollbar
							var $vBarWrapper	= $('<div/>').css({
								position	: 'absolute',
								left		: $vBar.css('left'),
								top			: $vBar.css('top'),
								right		: $vBar.css('right'),
								bottom		: $vBar.css('bottom'),
								width		: $vBar.width(),
								height		: $vBar.height()
							}).bind('mouseenter.jsp',function() {
								
								clearTimeout( instance.hovertimeout );
								clearTimeout( instance.elementtimeout );
								
								instance.isScrollbarHover	= true;
								
								// show the scrollbar after 100 ms.
								// avoids showing the scrollbar when moving from inside the element to outside, passing over the scrollbar								
								instance.elementtimeout	= setTimeout(function() {
									$vBar.stop( true, true ).jspmouseenter();
								}, 100 );	
								
							}).bind('mouseleave.jsp',function() {
								
								// hide the scrollbar after hovertimeout_t
								clearTimeout( instance.hovertimeout );
								instance.isScrollbarHover	= false;
								instance.hovertimeout = setTimeout(function() {
									// if scrolling at the moment don't hide it
									if( !instance.isScrolling )
										$vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
								}, instance.extPluginOpts.hovertimeout_t );
								
							});
							
							$vBar.wrap( $vBarWrapper );
						
						}
					
					}
					
				},
				
				// the jScrollPane instance
				jspapi 			= $el.data('jsp');
				
			// extend the jScollPane by merging	
			$.extend( true, jspapi, extensionPlugin );
			jspapi.addHoverFunc();
		
		});
	</script> 

<div id="product_content">
	<h4>รายการสินค้าทั้งหมด</h4>
	<div id="jp-container" class="jp-container">
			<!--[foreach from=$objectArray item=item]-->
		<div class="product_list">
			<div class="column_left">
						<div class="product_image">
              <div class="zoom-section">    	  
                <div class="zoom-small-image">
                  <div id="wrap" style="top:0px;z-index:9999;position:relative;">
                    <a href="<!--[pngetbaseurl]--><!--[$item.firstfilename]-->" class="cloud-zoom" id="zoom1" rel="adjustX: 10, adjustY:-4" style="position: relative; display: block; ">						
                  <img src="<!--[pngetbaseurl]--><!--[$item.firstthumbname]-->" alt="" title="Optional title display" style="display: block; "   width="130px"/>
                  <!--[if $item.status eq '9']-->
                    <div class="product-reccommend" onclick="location.href='<!--[pnmodurl modname='IShopStore' func='status' ctrl='Item' id=$item.id status='9']-->';">
                    </div>
                  <!--[/if]-->
                </a>
                <div class="mousetrap" style="background-image: url(http://www.professorcloud.com/mainsite/); z-index: 999; position: absolute; width: 240px; height: 320px; left: 0px; top: 0px; cursor: move; ">
                </div>
              </div>
            </div>
          </div>									
				</div>
			</div>
			

    <div class="zoom-section">    	  
      <div class="zoom-small-image">
        <div id="wrap" style="top:0px;z-index:9999;position:relative;">
          <a href="<!--[pngetbaseurl]--><!--[$item.firstfilename]-->" class="cloud-zoom" id="zoom1" rel="adjustX: 10, adjustY:-4" style="position: relative; display: block; ">
            <img src="<!--[pngetbaseurl]--><!--[$item.firstthumbname]-->" alt="" title="<!--[$item.title|mb_truncate:80:"..."]-->" style="display: block; "  width="130px">
            <!--[if $item.status eq '9']-->
              <div class="product-reccommend" onclick="location.href='<!--[pnmodurl modname='IShopStore' func='status' ctrl='Item' id=$item.id status='9']-->';">
              </div>
            <!--[/if]-->        
          </a>
        </div>
      </div>
    </div>			
			<div class="column_right">
					<div class="product_title">
					<h1>
						<a href="<!--[pnmodurl modname='IShopStore' func='view' ctrl='item' id=$item.id]-->">
							<!--[$item.title|mb_truncate:80:"..."]-->
						</a>
					</h1>
					</div>
					<div class="product_detail">
					<p><!--[$item.detail|mb_truncate:150:"..."]--></p>
					</div>
					<div class="product_cart"></div>
					<div class="product_price">
					<span>ราคา</span><span>&nbsp;<!--[$item.price|number_format]-->&nbsp;</span><span>บาท</span>
							
					</div>
					<button class="button_cart">หยิบใส่ตะกร้า</button>
			</div>
		</div>
	  <!--[/foreach]-->
	</div>
</div>
<div class="clr"></div>
